<template>
  <view class="axq-picker-range">
    <view class="van-picker__toolbar">
      <view class="van-picker__cancel" @click="handleCancel">{{ cancelText }}</view>
      <view class="van-picker__confirm" @click="handleConfirm">{{ confirmText }}</view>
    </view>
    {{ startTime }}-{{ endTime }}
    <view class="quick-time">
      <text class="quick-time-item" @click.prevent="quickSelect('curDay')">今日</text>
      <text class="quick-time-item" @click.prevent="quickSelect('curWeek')">本周</text>
      <text class="quick-time-item" @click.prevent="quickSelect('curMonth')">本月</text>
    </view>

    <van-datetime-picker
      ref="dateTimePicker"
      type="date"
      :show-toolbar="false"
      :min-date="startDay"
      :max-date="cpnMaxDate"
      :value="pickerValue"
      :formatter="cpnFormatter"
      :confirm-button-text="confirmText"
    />

    <!-- v-model双向异常 -->
    <!-- <van-datetime-picker ref="dateTimePicker"
                         show-toolbar
                         type="date"
                         :min-date="startDay"
                         :max-date="tmaxDate"
                         v-model="pickerValue"
    :formatter="cpnFormatter"/>-->
  </view>
</template>

<script>
import VanDatetimePicker from 'vant/datetime-picker/index'
const defStartDay = new Date('2017-01-01').valueOf()
export default {
  name: '',
  components: { VanDatetimePicker },
  mixins: [],
  props: {
    minDate: { type: Number, defalut: defStartDay },
    maxDate: Number,
    value: { type: Array, default: () => { return [] } },
    formatter: { type: Function },
    todayIsMaxDate: Boolean
  },
  data () {
    return {
      step: 0,//0-未选,1选了开始,
      options: {
        startDay: this.minDate
      },
      pickerValue: new Date().valueOf(),
      startDay: this.minDate,
      startValues: [],
      endValues: [],
      cpnMaxDate: this.getDayjsObj(Date.now()).add(5, 'year').valueOf(),

      //test
      tminDate: new Date(2020, 0, 1).valueOf(),
      tmaxDate: new Date(2025, 10, 1).valueOf(),
      tcDate: new Date().valueOf()
    }
  },
  computed: {
    confirmText () {
      let res = '确认'
      if (this.step == 0) {
        res = '下一步'
      } else if (this.step == 1) {
        res = '确认'
      }
      return res
    },
    cancelText () {
      return '取消'
    },
    startTime () {
      let arr = this.startValues.slice(0, 3)
      return arr.map(d => parseInt(d)).join('-')
    },
    endTime () {
      let arr = this.endValues.slice(0, 3)
      return arr.map(d => parseInt(d)).join('-')
    }
  },
  created () {
    this.initMaxDate()
  },
  methods: {
    cpnFormatter (type, val) {
      if (this && this.formatter) {
        return this.formatter(type, val)
      } else {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`;
        } else if (type === 'day') {
          return `${val}日`;
        }
        return val;
      }
    },
    initMaxDate () {
      if (this.todayIsMaxDate) {
        this.cpnMaxDate = Date.now()
      } else {
        if (this.maxDate) {
          this.cpnMaxDate = this.maxDate
        }
      }
    },
    resetStartDay () {
      this.startDay = this.options.startDay
    },
    handleConfirm () {
      let picker = this.$refs.dateTimePicker.picker
      let values = picker.getValues()
      if (this.step == 0) {
        this.step++

        this.startValues = values
        this.startDay = this.getDayjsObj(this.startTime).valueOf()
        picker.setIndexes([0, 0, 0])

        // 限制结束事件的最小时间未开始时间
      } else {
        this.endValues = values
        this.$emit('confirm', [this.startTime, this.endTime])

        // 重置
        this.startDay = this.options.startDay
        picker.setIndexes([0, 0, 0])
        this.step = 0
      }
    },
    handleCancel () {
      let picker = this.$refs.dateTimePicker.picker
      picker.setIndexes([0, 0, 0])
    },
    quickSelect (type) {
      let curDayjsObj = this.getDayjsObj(),
        startObj
      let startTime,
        endTime = curDayjsObj.format('YYYY-MM-DD')
      if (type == 'curDay') {
        startTime = endTime
      } else if (type == 'curWeek') {
        startObj = curDayjsObj.day(0)
      } else if (type == 'curMonth') {
        startObj = curDayjsObj.date(1)
      }
      if (startObj) {
        startTime = startObj.format('YYYY-MM-DD')
      }
      this.$emit('input', [startTime, endTime])
      this.$emit('confirm', [startTime, endTime])
    }
  }
}
</script>

<style lang="less">
.axq-picker-range {
  .van-picker {
    &__toolbar {
      .flexLayout(@j:space-between);
      height: var(--picker-toolbar-height, 44px);
      line-height: var(--picker-toolbar-height, 44px);
    }
    &__cancel,
    &__confirm {
      padding: var(--picker-action-padding, 0 16px);
      font-size: var(--picker-action-font-size, 14px);
    }
    &__cancel {
      color: var(--picker-cancel-action-color, #969799);
    }
    &__confirm {
      color: var(--picker-confirm-action-color, #576b95);
    }
  }

  .quick-time {
    .flexLayout();
    padding: @box-gap;
    &-item {
      margin-right: 20rpx;
      display: inline-block;
      width: 150rpx;
      height: 60rpx;
      text-align: center;
      background: #f7f7f7;
      font-size: 30rpx;
      font-weight: 500;
      color: #666;
      line-height: 60rpx;
    }
  }
}
</style>